<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>大咖vip_未登录</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/main.css" />
    <style>
        body {
            background-color: #fff;
        }

        .login {
            padding: 20px 20px 10px 20px;
            line-height: normal;
            background-color: #fff;
        }

        .image0 {
            float: left;
            width: 25px !important;
            width: 24px;
            height: 24px;
            border-radius: 50%;
        }

        .image1 {
            float: right;
            width: 20px !important;
            padding-top: 1px;
        }

        .test {
            position: relative;
        }

        .list {
            height: 38px;
            background-color: #DAD9D9;
            line-height: 38px;
            display: -webkit-box;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        .list::-webkit-scrollbar {
            display: none;
        }

        .child {
            padding: 0px 29px;
            text-align: center;
            color: #858585;
            height: 30px;
        }

        .childact {
            color: #FF5600;
            position: relative;
        }

        .childact::before {
            content: "";
            position: absolute;
            bottom: -8px;
            height: 2px;
            background-color: #FF722C;
            left: 19px;
            right: 16px;
        }

        .line {
            width: 68px;
            height: 3px;
            background-color: #FF722C;
            position: absolute;
            top: 35px;
            right: 50%;
            margin-right: -35px;
        }

        .theme {
            height: 103px;
            background-color: #FFF1E8;
            text-align: center;
            padding: 0px 15px;
        }

        .img {
            float: left !important;
            width: 68px !important;
            height: 66px !important;
            border-radius: 50% !important;
            margin-top: 18px !important;
        }

        .content {
            padding-left: 10px;
            padding-top: 23px;
            float: left;
            width: 73%;
            text-align: left;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .image {
            width: 32px !important;
            height: 32px !important;
            position: absolute;
            top: 33px;
            right: 20px;
            z-index: 999;
        }

        .lists {
            padding: 12px 10px 0px 10px;
        }

        .childlist {
            width: 50%;
            float: left;
            padding: 0px 6px;
            margin-bottom: 7px;
        }

        .set {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 12px;
            margin-bottom: 2px;
        }

        .listwenzi {
            font-size: 13px;
            color: #070707;
            margin: 5px 0px;
        }

        .listwenzi img {
            display: inline-block;
            height: 9px;
            width: 5px;
            margin-left: 5px;
        }

        .state {
            font-size: 15px;
            color: #9D9D9D;
            padding-left: 15px;
            height: 25px;
            line-height: 25px;
            float: left;
        }

        .open {
            width: 70px;
            text-align: center;
            margin-left: 15px;
            background-color: #EA5413;
            color: #fff;
            font-size: 10px;
            border-radius: 22px;
            display: inline-block;
        }

        .vip {
            font-size: 10px;
            color: #fff;
            background-color: #EA5413;
            padding: 0px 2px;
            border-radius: 3px;
            position: absolute;
            bottom: -3px;
            right: -10px;
        }
        .zong{
          /*margin-top: 5px;*/
          /*background-color: red;*/
        }
    </style>
</head>

<body>
    <div id="head_div"></div>
    <div id="vm" v-cloak>
      <div class="zong">
        <div class="login" v-if="isloginflag">
            <div style="position:relative;width:24px;height:24px;float:left;" @click="opengeren()">
                <img v-bind:src="avatar" alt="" class="image0">
                <!-- <span class="vip" v-if="isvipflag">VIP</span> -->
            </div>
            <span class="state">{{nickname}}</span>
            <!-- <div class="open" v-if="!isvipflag"  onclick="Buy()">开通会员</div> -->
            <img src="../../image/home/search.png" alt="" class="image1" onclick="OpenHotSearchWin()">
            <div class="aui-clearfix"></div>
        </div>

        <div class="login test" v-else>
            <img src="../../image/VIP/gray_touxiang.png" alt="" class="image0" onclick="login()">
            <span class="state">登录后可看更多视频</span>
            <!-- <span class="state">登录后可同步VIP特权</span> -->
            <img src="../../image/home/search.png" alt="" class="image1" onclick="OpenHotSearchWin()">
            <div class="aui-clearfix"></div>
        </div>

        <div class="list">
            <div class="child" @click="videlist(item,index)" style="font-size:14px;" v-bind:class="{ childact: item.flag }" v-for="item,index in Leaderlist">{{item.leader_name}}</div>
            <div class="aui-clearfix"></div>
        </div>
        </div>

    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/config.js"></script>
<script type="text/javascript" src="../../script/rest.js"></script>
<script type="text/javascript" src="../../script/vue.2.5.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/faskclick.js"></script>
<script type="text/javascript">
    var uid = $api.getStorage('uid');
    var vm = new Vue({
        el: '#vm',
        data: {
            Leaderlist: [],
            leader_id: '',
            isloginflag: true,
            isvipflag: false,
            avatar: '',
            nickname: '',
        },
        created: function() {
            var _this = this;
            apiready = function() {
                _this.init();
                api.parseTapmode();
                if ('addEventListener' in document) {
                    document.addEventListener('DOMContentLoaded', function() {
                        FastClick.attach(document.body);
                    }, false);
                }
                api.addEventListener({
                    name: 'loginsuccess'
                }, function(ret, err){
                  uid = $api.getStorage('uid');
                  if (uid) {
                      _this.isloginflag = true;
                      _this.getuserinfo();
                  } else {
                      _this.isloginflag = false;
                  }
                });

                var header = $api.byId('head_div');
                $api.fixStatusBar(header);
            }
        },
        methods: {
            init: function() {
                var _this = this;
                api.addEventListener({
                    name: 'exitlogin'
                }, function(ret, err) {
                  uid = $api.getStorage('uid');
                  if (uid) {
                      _this.isloginflag = true;
                      _this.getuserinfo();
                  } else {
                      _this.isloginflag = false;
                  }
                });
                api.addEventListener({
                    name: 'refreshmine'
                }, function(ret, err) {
                    uid = $api.getStorage('uid');
                    if (uid) {
                        _this.isloginflag = true;
                        _this.getuserinfo();
                    }
                });


                if (uid) {
                    _this.isloginflag = true;
                    _this.getuserinfo();
                } else {
                    _this.isloginflag = false;
                }
                //获取一级目录，
                new rest().get('Leaderlist').datae({
                    module: 3
                }).success(function(res) {
                    if (res.flag == 1) {
                        var Leader = [];
                        res.msg.map(function(ret, index) {
                            if (ret.level == 1) {
                                ret['flag'] = false
                                Leader.push(ret)
                            }
                        })
                        _this.Leaderlist = Leader
                        Vue.set(_this.Leaderlist[0], 'flag', true)
                        _this.leader_id = _this.Leaderlist[0].id;
                        var height=$('.zong').height();
                        // alert(api.safeArea.top)
                        // alert(height)
                        // alert(api.frameHeight)
                        // alert(api.winHeight)
                        api.openFrame({
                            name: 'vip_frame',
                            url: './vip_unlogin.html',
                            rect: {
                                x: 0,
                                y: height+api.safeArea.top,
                                w: 'auto',
                                h:api.frameHeight-height-api.safeArea.top
                            },
                            pageParam: {
                                leaderid: _this.leader_id
                            },
                            bounces: true,
                            bgColor: 'rgba(0,0,0,0)',
                            vScrollBarEnabled: true,
                            hScrollBarEnabled: true
                        });

                    }
                }).error(function(err) {
                    console.log(JSON.stringify(err))
                }).run()

            },
            opengeren:function() {
              api.openWin({
                  name: 'verify-personal',
                  url: '../login/verify-personal.html',
              });
            },
            getuserinfo() {
                var _this = this;
                new rest().get('getUserInfo').datae({
                    uid: uid
                }).success(function(res) {
                    if (res.flag == 1) {
                        if (res.msg[0].img) {
                            _this.avatar = res.msg[0].img;
                        } else {
                            _this.avatar = '../../image/my/bigmy.png';
                        }

                        _this.nickname = res.msg[0].nickname;

                        if (res.msg[0].level == 1) {
                            _this.isvipflag = true;
                        } else {
                            _this.isvipflag = false;
                        }

                    } else {
                        if (res.msg[0] == '用户id已失效' || res.msg[0] == '用户id不存在') {
                            api.toast({
                                msg: '账号异常',
                                duration: 2000,
                                location: 'middle'
                            });
                            $api.rmStorage('uid');
                            $api.rmStorage('session');
                            $api.rmStorage('mobile');
                            api.sendEvent({
                                name: 'exitlogin'
                            });
                        }
                    }
                    // console.log(JSON.stringify(res))
                }).error(function(err) {
                    console.log(JSON.stringify(err))
                }).run()
            },
            videlist: function(item, index) {
                this.Leaderlist.map(function(res, index2) {
                    res.flag = false;
                })
                item.flag = true
                Vue.set(this.Leaderlist, index, item)
                var _this = this;
                _this.page = 1;
                _this.leader_id = item.id;
                api.sendEvent({
                    name: 'qiehuan',
                    extra: {
                        leaderid: _this.leader_id,
                    }
                });

                // _this.videogetlists = [];
                // _this.videogetlist();

            },



        }
    })

    function login() {
        api.openFrame({
            name: 'login_introduction',
            url: '../myself/login_introduction.html',
            rect: {
                x: 0,
                y: 0,
                w: 'auto',
                h: 'auto'
            },
            bounces: false,
            bgColor: 'rgba(0,0,0,0.7)',
            vScrollBarEnabled: true,
            hScrollBarEnabled: true
        });
    }


    function OpenHotSearchWin() {
        api.openWin({
            name: 'hot',
            url: '../few/hot_win.html',
        });
    }

    function Buy() {
        api.openWin({
            name: 'unbuy_vip_win',
            url: 'unbuy_vip_win.html',
        });
    }
</script>

</html>
